<template>
	<view class="order-content">
		<view class="box">
			<u-subsection fontSize="15" :list="statusArray" :current="curNow" @change="sectionChange"></u-subsection>
		</view>
		
		<u-list @scrolltolower="scrolltolower" v-if="postList.length!=0" @scroll="scroll" :scrollTop="scrollTop">
			<u-list-item
				v-for="(item, index) in postList"
				:key="item.id"
			>
				<view style="margin:10rpx 20rpx;padding: 20rpx 40rpx 30rpx 20rpx;background-color: #fff;border-radius: 10rpx;">
					<u-row @click="toPostDetail(item.postId)" >
						<u-col span="3"><u--image :showLoading="true" :src="item.imgUrls[0]" width="60px" height="60px"></u--image></u-col>
						<u-col span="7">
							<u--text size="13" :lines="3" :text="item.content"></u--text>
						</u-col>
						<u-col span="2">
							<view class="deal-status"><text>{{item.state | stateToStr}}</text></view>
							<view style="margin-top: 120rpx;display: flex; justify-content: flex-end;font-size: 15px;font-weight: bold;color: red;">
								<text>￥</text>
								<text>{{item.dealPrice}}</text>
							</view>
						</u-col>
					</u-row>
					<u-row customStyle="margin-top: 20rpx;" v-if="item.state != 2">
						<u-col span="9">
							<text style="font-size: 13px;opacity: 0.7;">下单时间：{{item.createTime}}</text>
						</u-col>
						<!-- 我卖出的操作按钮 -->
						<u-col span="3" v-if="sign == 0">
							<u-button v-if="item.state==0" type="primary" text="确认发货" size="small" @click="openTih(item,'是否确定已发货了呢?',1)"></u-button>
						</u-col>
						<!-- 我买到的操作按钮 -->
						<u-col span="3" v-else>
							<u-button v-if="item.state==0" type="error" text="取消交易" size="small" @click="openTih(item,'是否确定取消交易?',3)"></u-button>
							<u-button v-if="item.state==1" type="warning" text="确认收货" size="small" @click="openTih(item,'是否确定已收到了货呢?',2)"></u-button>
						</u-col>
					</u-row>
				</view>
				
			</u-list-item>
			<view v-if="flag && postList.length>3" style="margin-bottom: 30rpx;">
				<u-divider text="我是有底线的" :dashed="true" lineColor="rgb(131 131 133)"></u-divider>
			</view>
		</u-list>
		<u-empty
				v-else
				text="暂无订单数据哦~"
				textSize="20"
				textColor="#8f99a3"
				iconColor="blue"
				iconSize="160"
				marginTop="100"
				mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
		<u-toast ref="uToast"></u-toast>
		<!-- 提示框 -->
		<u-modal 
			:show="hintShow" 
			:showCancelButton="true" 
			:closeOnClickOverlay="true" 
			@confirm="define" 
			@cancel="hintShow=false">
				<view class="slot-content">
					<text>{{textVal}}</text>
				</view>
		</u-modal>
	</view>
</template>

<script>
	import {getOrderBySale,getOrderByBuy,modifyOrder} from '@/utils/api.js'
	export default {
		data() {
			return {
				hintShow: false,
				sign: 0,
				statusArray:['全部','待发货','待收货','已完成'],
				curNow: 0,
				postList: [],
				flag: false,
				scrollTop: 0,
				//query: {pageNo: 1, pageSize: 10, type: 3, isFinishDeal: 1},
				query: {pageNo: 1, pageSize: 10, type: 3, state: -1},
				textVal: '',
				form: {id:null,postId:null,state:null},
			}
		},
		filters:{
			stateToStr(state){
				if(state == 0){
					return '待发货'
				}else if(state == 1){
					return '待收货'
				}else if(state == 2){
					return '已完成'
				}
				return '已取消'
			}
		},
		onLoad(option) {
			this.sign = parseInt(option.sign)
			if(this.sign == 1){
				this.statusArray.push('已取消')
			}
			uni.setNavigationBarTitle({
				title: this.sign==0?'我卖出的':'我买到的'
			})
			this.getOrder()
			//this.getList()
		},
		methods: {
			openTih(row, val, state){
				this.textVal = val
				this.hintShow = true
				this.form.id = row.id
				this.form.postId = row.postId
				this.form.state = state
			},
			//监听下拉是否出现返回顶部组件
			scroll(scrollTop){
				this.scrollTop = scrollTop
			},
			sectionChange(index) {
				if(index == this.curNow) return
				this.curNow = index;
				this.query.pageNo = 1
				this.query.state = index - 1
				this.postList = []
				this.getOrder()
			},
			toPostDetail(id){
				uni.$u.route(`pages/goods-details/goods-details?id=${id}`);
			},
			define(){
				const that = this
				that.hintShow = false
				modifyOrder(that.form).then(res => {
					let msg;
					if(that.form.state == 1){
						msg = '发货成功'
					}else if(that.form.state == 2){
						msg = '收货成功'
					}else {
						msg = '已取消交易'
					}
					getApp().globalData.toast[0].message = msg
					that.$refs.uToast.show({
						...getApp().globalData.toast[0],
						complete() {
							that.getOrder()
						}
					})
				}).catch(err=>{
					getApp().globalData.toast[1].message = err.message
					that.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {}
					})
				})
			},
			getOrder(){
				if(this.sign == 0){	//我卖出的
					getOrderBySale({params: this.query}).then(res => {
						for (let i = 0; i < res.length; i++) {
							res[i].imgUrls = res[i].imgUrls!=null?res[i].imgUrls.split(","):[]
						}
						this.postList = this.postList.concat(res)
						if(res.length == 0) this.flag = true
					}).catch(err => {
						getApp().globalData.toast[1].message = '加载数据失败'
						this.$refs.uToast.show({
							...getApp().globalData.toast[1],
							complete() {
								//回调
							}
						})
					})
				}else {		//我买到的
					getOrderByBuy({params: this.query}).then(res => {
						for (let i = 0; i < res.length; i++) {
							res[i].imgUrls = res[i].imgUrls!=null?res[i].imgUrls.split(","):[]
						}
						this.postList = this.postList.concat(res)
						if(res.length == 0) this.flag = true
					}).catch(err => {
						getApp().globalData.toast[1].message = '加载数据失败'
						this.$refs.uToast.show({
							...getApp().globalData.toast[1],
							complete() {
								//回调
							}
						})
					})
				}
				
			},
			
			scrolltolower() {
				//下拉加载
				if(!this.flag){
					this.query.pageNo++
					this.getOrder()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-content{
		padding-top: 20rpx;
		min-height: 100vh;
		background-color: rgb(242, 242, 242);
		.box {
			height: 70rpx;
			padding: 20rpx 0;
			// display: flex;
			// justify-content: center;
			// text{
			// 	flex: 1;
			// 	color: rgb(149, 149, 149);
			// }
			// .t-color{
			// 	font-weight: bold;
			// 	color: orangered;
			// }
		}
		.deal-status {
			font-size: 14px;
			width: 60px;
			height: 22px;
			padding: 10rpx;
			text-align: center;
			background-color: #f6f6f6;
			border-radius: 10rpx;
			color: #6fb6ff;
		}
	}
</style>
